<template>
    <view class="cart-item">
        <view class="">
            <view class="flex-v-c direct-box">
                <label class="item-radio" v-if="isShowCheckBox" @click.stop="changeDirectCheck(isSelect)">
                    <custom-checkbox :isSelect="isSelect"></custom-checkbox>
                </label>
                <iconsfont customIcons="icon-cangku" class="cangku" :color="themeColor" size="30"></iconsfont>
                <text class="direct-name">{{ productInfo.WarehouseName || "总部" }}</text>
            </view>
        </view>
        <scroll-view scroll-y="true" class="scroll">
            <view class="cart-item" v-for="cartItem in productInfo.newSubItems" :key="cartItem.ProductId">
                <cart-item-product
                    :selectData="selectData"
                    :orderType="orderType"
                    :productInfo="cartItem"
                    :specshow="cartItem.specshow"
                    :isEdit="isEdit"
                    @changeCheck="changeCheck"
                    @specfn="specfn($event, cartItem)"></cart-item-product>
                <cart-item-specs
                    v-if="cartItem.specshow"
                    @delTip="delTip"
                    :selectData="selectData"
                    :orderType="orderType"
                    v-for="(item, index) in cartItem.SubItems"
                    :isLast="index == productInfo.newSubItems.length - 1"
                    :key="item.ID"
                    :productInfo="item"
                    :isEdit="isEdit"
                    @upNum="upNum"
                    @checkboxChange="checkboxChange"></cart-item-specs>
            </view>
        </scroll-view>
        <!-- <view v-else>
            <cart-item-product
                :selectData="selectData"
                :orderType="orderType"
                :productInfo="productInfo"
                :specshow="specshow"
                :isEdit="isEdit"
                @changeCheck="changeCheck"
                @specfn="specfn"></cart-item-product>
            <cart-item-specs
                v-if="specshow"
                @delTip="delTip"
                :selectData="selectData"
                :orderType="orderType"
                v-for="(item, index) in productInfo.SubItems"
                :isLast="index == productInfo.SubItems.length - 1"
                :key="item.ID"
                :productInfo="item"
                :isEdit="isEdit"
                @upNum="upNum"
                @checkboxChange="checkboxChange"></cart-item-specs>
        </view> -->
    </view>
</template>

<script>
import cartItemProduct from "@/components/cart/cart-item-product.vue"
import cartItemSpecs from "@/components/cart/cart-item-specs.vue"
import customCheckbox from "@/components/common/custom-checkbox.vue"

export default {
    components: {
        cartItemProduct,
        cartItemSpecs,
        customCheckbox,
    },
    props: {
        productInfo: {
            type: Object,
            default: {},
        },
        selectData: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        orderType: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {
            specshow: true,
            isSelect: false,
            subIds: [],
            themeColor: "",
        }
    },
    watch: {
        selectData(e) {
            this.isSelectFn(e)
        },
        isEdit(e) {
            this.isSelectFn(this.selectData)
        },
    },
    mounted() {
        this.isSelectFn(this.selectData)
    },
    created() {
        let mainColor = this.$store.state.themeColor
        this.themeColor = mainColor
    },
    methods: {
        changeSpecShow(e) {
            this.specshow = !e
        },
        isSelectFn(data) {
            let ids = data.ids
            let subIds = []
            this.productInfo.SubItems.forEach((sub) => {
                if (sub.SaleStatus == 1 || this.isEdit) {
                    subIds.push(String(sub.ID))
                }
            })
            this.subIds = subIds
            let newList = []
            subIds.filter((val) => {
                if (ids.includes(String(val))) {
                    newList.push(val)
                }
            })
            this.isSelect = newList.length > 0 && newList.length == subIds.length
        },
        upNum(e) {
            this.$emit("upNum", this.productInfo)
        },
        changeCheck(e) {
            this.$emit("changeCheck", e)
        },
        specfn(e, item) {
            item.specshow = e
        },
        checkboxChange(e, id) {
            this.$emit("checkboxChange", e, id)
        },
        delTip(e) {
            this.$emit("delTip", e)
        },
        changeDirectCheck(isSelect) {
            let obj = {
                isSelect: !isSelect,
                supplierId: this.productInfo.SupplierId,
                subIds: this.subIds,
                warehouseId: this.productInfo.WarehouseId,
            }
            if (this.isEdit) {
                this.$emit("changeDirectCheck", obj)
            } else {
                if (this.orderType == 24) {
                    this.$emit("changeDirectCheck", obj)
                } else {
                    // 不验证库存
                    if (this.getAppSet().NoCheckStock) {
                        this.$emit("changeDirectCheck", obj)
                    } else {
                        let subIds = []
                        this.productInfo.SubItems.forEach((e) => {
                            if (e.Amount <= e.Stock) {
                                subIds.push(String(e.ID))
                            }
                        }) //有一个规格库存不足时无法全选
                        if (subIds.length == this.productInfo.SubItems.length) {
                            this.$emit("changeDirectCheck", obj)
                        } else {
                            this.easyToast("库存不足")
                        }
                    }
                }
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.cart-item {
    background: $color-white;
    padding: 11rpx $app-page-padding;
    border-radius: $border-radius-10;
    margin-top: 20rpx;
}

.direct-box {
    padding: 6px 0;
    .checkbox {
        width: 40rpx;
        height: 40rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        border: 2rpx solid #b2b2b2;
        margin-right: 14rpx;
        position: relative;
    }
    .checkbox-active {
        color: $app-color-main;
        background: $app-color-main;
        border-color: currentColor;
        &:after {
            content: "";
            position: absolute;
            width: 16rpx;
            height: 8rpx;
            border: 4rpx solid;
            border-color: transparent transparent #fff #fff;
            transform: rotate(-45deg);
            left: 8rpx;
            top: 6rpx;
        }
    }

    .cangku {
        margin-left: 32rpx;
        margin-right: 12rpx;
    }
    .icon-dianpu {
        font-size: 32rpx;
        margin-right: 10rpx;
    }
    .direct-name {
        font-size: 30rpx;
    }
}
</style>
